﻿@model IEnumerable<Icoders.MarketTracker.Core.MasterData.News>
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        $.post('/home/getPieChartData', {},
    function (data) {
        var tdata = new google.visualization.DataTable();
        tdata.addColumn('string', 'Product');
        tdata.addColumn('number', 'Quantity');

        for (var i = 0; i < data.length; i++) {
            tdata.addRow([data[i].Product, data[i].Quantity]);
        }

        var options = {
            title: "Top 5 Selling Products",
            legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
            is3D: true
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(tdata, options);
    });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawbarChart);
    function drawbarChart() {

        $.post('/home/GetBarChartData', {},
    function (data) {
        var tdata = new google.visualization.DataTable();
        tdata.addColumn('string', 'Fsr');
        tdata.addColumn('number', 'Quantity');

        for (var i = 0; i < data.length; i++) {
            tdata.addRow([data[i].Fsr, data[i].Quantity]);
        }

        var options = {
            title: "Top 5 Selling Field Sale Rep",
            legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
            is3D: true 
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_bar_div'));
        chart.draw(tdata, options);
    });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {

        $.post('/home/GetLineChartData', {},
    function (data) {
        var tdata = new google.visualization.DataTable();
        tdata.addColumn('string', 'Period');
        tdata.addColumn('number', 'SuccessfullCall');
        tdata.addColumn('number', 'Call');

        for (var i = 0; i < data.length; i++) {
            tdata.addRow([data[i].Period, data[i].SuccessfullCall, data[i].Call]);
        }

        var options = {
            title: "Outlet Callage Efficiency",
             legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_line_div'));
        chart.draw(tdata, options);
    });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawStackedBarChart);
    function drawStackedBarChart() {

        $.post('/home/GetStackedTestChartData', {},
    function (data) {
        var tdata = new google.visualization.DataTable(data,0.5);
        
        var options = {
            title: "Daily Product Summary",
            vAxis: { title: 'Volume' },
            hAxis: { title: 'Period' },
            legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
            isStacked:true,
                    

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_StackedBar_div'));
        chart.draw(tdata, options);
    });
    }
</script>
<table>
    <tr>
        <td>
            <div id="chart_div" style="width: 500px; height: 300px;">
            </div>
        </td>
        <td>
        <div id="chart_StackedBar_div" style="width: 500px; height: 300px;">
            </div>
        
        </td>
    </tr>
    <tr>
        <td>
            <div id="chart_line_div" style="width: 500px; height: 300px;">
            </div>
        </td>
        <td>
        <div id="chart_bar_div" style="width: 500px; height: 300px;">
            </div>
        </td>
    </tr>
</table>
